
<section class="content-wrap bg-white">
  <header class="header navbar bg-white shadow">
    <div class="pull-left offscreen-left" style="padding-top:15px;">
      <div class="form-group">
        <input id="name" type="text" placeholder="请输入用户名或昵称">
      </div>
    </div>
    <div class="pull-right offscreen-right btn-group tool-button">
      <a class="btn btn-primary navbar-btn" onclick="_selectAll()">全选</a>
      <a class="btn btn-primary navbar-btn" onclick="_selectOn()">确定</a>
    </div>
  </header>
  <div class=panel-body style="padding-top: 50px;">
    <div class="table-responsive no-border">
      <input id="unitid" type="hidden">
      <table id="datatable_select" class="table table-bordered table-striped mg-t datatable">
        <thead>
        <tr>
          <th>用户名</th>
          <th>姓名</th>
          <th>状态</th>
          <th>在线</th>
      </table>
    </div>
  </div>
</section>
<script language="JavaScript">
  var datatable_select;
  function initdatatable_select() {
    datatable_select = $('#datatable_select').DataTable({
      "dom": '<"toolbar">frtip',
      "searching":false,
      "processing": false,
      "serverSide": true,
      "select": true,
      "ordering": true,
      "language": {
        "url": "/assets/plugins/datatables/cn.json"
      },
      "ajax": {
        "url": "/system/role/selectUser",
        "type": "post",
        "data": function (d) {
          d.roleid = $('#roleid').val();
          d.name = $('#name').val();
        }
      },
      "order": [[0, "desc"]],
      "columns": [
        {"data": "username", "bSortable": true},
        {"data": "nickname", "bSortable": true},
        {"data": "status", "bSortable": true},
        {"data": "online", "bSortable": true}
      ],
      "columnDefs": [
        {
          "render": function (data, type, row) {
            if (data) {
              return '<i class="fa fa-circle text-success ml5"></i>';
            } else {
              return '<i class="fa fa-circle text-danger ml5"></i>';
            }
          },
          "targets": 3
        },
        {
          "render": function (data, type, row) {
            if (data) {
              return '<i id="disable_' + row.id + '" class="fa fa-circle text-success ml5"></i>';
            } else {
              return '<i id="disable_' + row.id + '" class="fa fa-circle text-danger ml5"></i>';
            }
          },
          "targets": 2
        }
      ]
    });
    datatable_select.on('click', 'tr', function () {
      $(this).toggleClass('selected');
    });
    $("#name").on('keyup', function () {
      datatable_select.ajax.reload();
    });
  }
  function _selectAll() {
    $("#datatable_select").find("tr").each(function () {
      if (!$(this).hasClass('selected'))
        $(this).addClass('selected');
    });
  }
  function _selectOn() {
    var chks = datatable_select.rows('.selected').data();
    if (chks.length > 0) {
      var ids = [];
      $.each(datatable_select.rows('.selected').data(), function (i, n) {
        ids.push(n.id);
      });
      $.post("/system/role/pushUser", {ids:JSON.stringify(ids),roleid: $('#roleid').val()}, function (data) {
        if (data.errno == 0) {
          datatable_select.ajax.reload();
          datatable.ajax.reload();
        } else {
          Toast.error(data.errmsg);
        }
        $('#dialogUserSelect').modal('hide');
      }, "json");
    }else{
      Toast.warning("请先选择用户！");
    }
  }
  $(document).ready(function () {
    initdatatable_select();
  });

</script>
